import path from "path";
import { merge } from "webpack-merge";
import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
import baseConfig from "./webpack.base";
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const host = "127.0.0.1";
const port = "8082";

// 合并公共配置,并添加开发环境配置
const devConfig: Configuration = merge(baseConfig, {
  mode: "development", // 开发模式,打包更加快速,省了代码优化步骤
  devtool: "eval-cheap-module-source-map",
  plugins: [
    new ReactRefreshWebpackPlugin(), // 添加热更新插件==在不需要刷新浏览器的前提下模块热更新，并且能够保留react组件的状态。
  ],
  devServer: {
    host,
    port,
    open: false, // 是否自动打开
    compress: false, // gzip压缩,开发环境不开启，提升热更新速度
    hot: true, // 开启热更新
    historyApiFallback: true, // 解决history路由404问题
    setupExitSignals: true, // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出进程。
    static: {
      directory: path.join(__dirname, "../public"), // 托管静态资源public文件夹
    },
    headers: { "Access-Control-Allow-Origin": "*" },
    proxy: {
      // @ts-ignore
      "/api": {
        target: "http://172.24.202.122:8080", // 联调地址
        // target: 'https://yapi.xxx-int.com/mock/13187', // mock 地址
        // target: 'http://dev.xxx.xxx.com:8133',  // 测试(QA)环境地址
        // target: 'http://dev.xxx.xxx.com',  // 线上(prod)环境地址
        changeOrigin: true,
      },
    },
  },
});

export default devConfig;
